﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <link href="~/Content/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen" />
    <link href="~/Content/bootstrap/bootstrap-progressbar-2.3.1.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="~/Content/jquery-ui/jquery-ui.css" rel="stylesheet" />

    <link href="~/Content/slickgrid/slick.grid.css" rel="stylesheet" />
    <link href="~/Content/slickgrid/slickgrid-bootstrap.css" rel="stylesheet" />
    <link href="~/Content/slickgrid/slickgrid-example.css" rel="stylesheet" />
    <link href="~/Content/ztree/metro.css" rel="stylesheet" />
    <link href="~/Content/msgBoxLight.css" rel="stylesheet" />
    <link href="~/Content/master.css" rel="stylesheet" />

    <title>
        Product Order Page
    </title>
    <style id="content-styles">
        .percent-complete-bar {
            display: inline-block;
            height: 6px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }
    </style>
</head>
<body>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="container-fluid">
                    <!-- Feature Buttons -->
                    <div class="row-fluid" style="float:left;">
                        <div class="top-nav ">
                            <a href="#" class="btn btn-info lang" as="syncorder" onclick="pordermanager.syncorder();"><i class="icon-white icon-ok"></i> </a>
                            <a href="#" class="btn btn-info lang" as="assignorder" onclick="pordermanager.runAppFlow('dispatch');">
                                <i class="icon-white icon-user"></i>
                            </a>
                            <a href="#" class="btn btn-info lang" as="sampleorder" onclick="pordermanager.runAppFlow('sample');"><i class="icon-white icon-print lang"></i> </a>
                            <a href="#" class="btn btn-info lang" as="productorder" onclick="pordermanager.runAppFlow('manufacture');"><i class="icon-white icon-cog"></i> </a>
                            <a href="#" class="btn btn-info lang" as="qcorder" onclick="pordermanager.runAppFlow('qccheck');"><i class="icon-white icon-zoom-in"></i> </a>
                            <a href="#" class="btn btn-info lang" as="weightorder" onclick="pordermanager.runAppFlow('weight');"><i class="icon-white icon-shopping-cart"></i> </a>
                            <a href="#" class="btn btn-info lang" as="deliveryorder" onclick="pordermanager.runAppFlow('delivery');"><i class="icon-white icon-plane"></i> </a>
                            <a href="#" class="btn btn-success lang" as="processdiagram" onclick="sfmain.showKGraph();">
                                <i class="icon-white icon-picture"></i>
                            </a>

                            <!--search & user info start-->
                            <ul class="nav pull-right top-menu">
                                <!-- user login dropdown start-->
                                <li class="dropdown">
                                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                        <img alt="" src="~/Content/img/avatar1_small.jpg">
                                        <span class="username" id="spnLogonUser">Unknown User</span>
                                        <b class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu extended logout">
                                        <li>
                                            <a href="~/Account/Login" data-toggle="modal" data-target="#modelLoginForm"
                                               role="dialog" id="btnLogount" onclick="onUserLogout();">
                                                <i class="fa fa-key lang" as="relogin"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <!-- user login dropdown end -->
                            </ul>
                            <!--search & user info end-->
                        </div>
                    </div>
                    <div class="dropdown" style="float:left;margin-left: 5px;">
                            <a class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th lang" as="options"> </span><span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="lang" as="en" onclick="sfmain.changeLang('en');"></a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="lang" as="zh" onclick="sfmain.changeLang('zh');"></a></li>
                            </ul>
                        </div>
                    <!-- order list -->
                    <div class="row-fluid">
                        <legend>
                            <span class="lang" as="orderlist"></span>
                            <select id="ddlStatus">
                                <option value="-1" class="lang" as="chooseoption"></option>
                                <option value="1" class="lang" as="ready"></option>
                                <option value="2" class="lang" as="waitassignorder"></option>
                                <option value="3" class="lang" as="waitsampleorder"></option>
                                <option value="4" class="lang" as="waitproductorder"></option>
                                <option value="5" class="lang" as="waitqcorder"></option>
                                <option value="6" class="lang" as="waitweightorder"></option>
                                <option value="7" class="lang" as="completeorder"></option>
                            </select>
                            <a href="#" class="btn btn-info lang" as="searchorder" onclick="pordermanager.queryByStatus();"><i class="icon-white icon-zoom-in"></i> </a>
                        </legend>
                    </div>
                    <div class="row-fluid">
                        <div id="myGridProductOrder" style="width:100%;height:400px;"></div>
                    </div>
                </div>
                <!-- process list and log-->
                <legend><span class="lang" as="processdata"></span></legend>
                <div class="row-fluid">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#tabReadyActivityInstance" data-toggle="tab" class="lang" as="todotask">

                            </a>
                        </li>
                        <li><a href="#tabAppFlowLog" data-toggle="tab" class="lang" as="processlog"></a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="tabReadyActivityInstance">
                            <div class="row-fluid">
                                <div id="myGridReadyActivityInstance" style="width:1200px;height:300px;"></div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tabAppFlowLog">
                            <div class="row-fluid">
                                <div id="myGridAppFlow" style="width:400px;height:300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <legend><span class="lang" as="instruction"></span></legend>
                <!-- order process instruction -->
                <div class="row-fluid">
                    <div class="span12">
                        <span class="lang" as="instructionstep">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- beginning of Modal HTML Page-->
    <div id="modelLoginForm" class="modal hide eavModalDialog" style="width:360px;height:400px;">
        <div class="modal-dialog">
            <!-- Modal -->
            <div class="modal-body">
                <!-- Content will be loaded here from "remote.php" file -->
            </div>
        </div>
    </div>

    <div id="modelNextStepForm" class="modal hide eavModalDialog" style="width:400px;height:500px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel" class="lang" as="choosenextstepuser"></h3>
        </div>
        <div class="modal-body" style="width:300px;height:320px;">
            <ul id="nextStepTree" class="ztree" style="overflow:auto;"></ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary lang" as="sure" onclick="nextactivitytree.sure();"></button>
            <button class="btn lang" as="cancel" data-dismiss="modal" aria-hidden="true"></button>
        </div>
    </div>

    <!--Progress Bar-->
    <div class="modal js-loading-bar">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="progress">
                        <div class="bar" data-transitiongoal="75"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="~/Scripts/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery-ui-1.10.3.min.js"></script>

    <script type="text/javascript" src="~/Scripts/jquery/jquery.event.drag-2.2.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.msgBox.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootbox.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-progressbar.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="~/Scripts/slickgrid/slickgrid.min.js"></script>
    <script type="text/javascript" src="~/Scripts/slickgrid/slick.formatters.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="~/Scripts/handlebars.js"></script>
    <script type="text/javascript" src="~/Scripts/jshelper.js"></script>
    <script type="text/javascript" src="~/Scripts/localhelper.js"></script>

    <script type="text/javascript" src="~/ViewJS/kresource.js"></script>
    <script type="text/javascript" src="~/ViewJS/pordermanager.js"></script>
    <script type="text/javascript" src="~/ViewJS/sfmain.js"></script>
    <script type="text/javascript" src="~/ViewJS/nextactivitytree.js"></script>

    <script type="text/javascript">
        $(function () {
            kresource.localize();

            lsm.removeTempStorage();

            sfmain.ready();
        })

        function onUserLogout() {
            lsm.removeTempStorage();
        }
    </script>

</body>
</html>
